<template>
  <view :class="{ 'active': active === true, 'box-itm': true }" @click="onclick">
    <view class="box-itm-name">{{ shop.name }}</view>
    <view class="box-itm-adress">
      <ImgIcon class="icon" size="32*32" src="static/icons/icon-subtract.png"></ImgIcon>
      <text>{{ shop.address }}</text>
    </view>
    <view class="box-itm-way">
      <ImgIcon class="icon" size="32*32" src="static/icons/icon-vector.png"></ImgIcon>
      <text>{{ shop.distance }}km</text>
    </view>
  </view>
</template>

<script setup>
import ImgIcon from "@/components/ui/img-icon"

const { shop, active } = defineProps(['shop', "active"])
const emit = defineEmits(['choose'])
function onclick() {
  emit("choose", { ...shop });
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
